<template>
  <div>
    
    <div>
      <el-card>
        <el-tabs type="border-card">
          <el-tab-pane label="基本设置">
            <h2>ZeroTier</h2>
              <div class="title_tips">易于使用的 OpenVPN 服务器 Web-UI</div>
              <div>
                <el-card style="padding-left:0px">
                  <span style="color: red;text-align:left">Zerotier 未运行</span>
                </el-card>
                
              </div>
            <div style="padding-left: 80px;">
              <!-- <div style="margin: 20px;"></div> -->
              <el-form ref="form" :model="form" label-width="200px">
                <el-form-item label="启用">
                  <el-checkbox v-model="form.checked" style="margin-top:0px"></el-checkbox>
                  <!-- <el-input v-model="formLabelAlign.name"></el-input> -->
                </el-form-item>
                
                <el-form-item label="ZeroTier Network ID">
                  <!-- <div v-for = "(item,index) in arrayData" :key="item.id"> -->
                  <div v-for="item in form.push" :key="item.id">
                    <el-row >
                      <el-col :span="8">
                        <el-input :value="form.value"></el-input>
                      </el-col>
                      <el-col :span="12">
                          <el-button type="danger" v-if="!item.isLast" @click="deletd(item.id)">-</el-button>
                          <el-button type="primary" v-else @click="add">+</el-button>
                      </el-col>
                    </el-row>
                    <!-- <el-input :value="item.value"></el-input>
                    <el-button type="danger" v-if="!item.isLast" @click="deletd(item.id)" >-</el-button>
                    <el-button type="primary" v-else @click="add">+</el-button> -->
                  </div>
                </el-form-item>
                <el-form-item label="自动允许客户端NAT">
                  <el-checkbox v-model="form.able" style="margin-top:0px"></el-checkbox>
                  <span class="tips1">
                    <i class="el-icon-question"></i>点击跳转到Zerotier官网管理平台，新建或者管理网络，并允许客户端接入访问你私人网路（新接入的节点默认不允许访问）
                  </span>
                </el-form-item>
                <el-form-item>
                  <!-- <el-input v-model="form.profile"></el-input> -->
                  <el-button class=" " size="medium" type="primary" style="background:#8b66f3;">ZEROTIER.COM</el-button><br/>
                  <span class="tips1"><i class="el-icon-question"></i>点击跳转到Zerotier官网管理平台，新建或者管理网络，并允许客户端接入访问你私人网路（新接入的节点默认不允许访问）</span>
                </el-form-item>
              </el-form>
              
              <div>
                <!-- <el-button @click="download" class="el-button-color add-button-box" size="medium" type="primary"> -->
                
              </div>
            </div>
            
          </el-tab-pane>
          <el-tab-pane label="接口信息">
            <div class="textarea">
              <textarea name="" id="" cols="150px" height="80px" rows="12"></textarea>
            </div>
          </el-tab-pane>
        </el-tabs>
        
      </el-card>
    </div>
    <div class="button">
      <el-button class="saveOrUpdate">保存&应用</el-button>
      <el-button class="save">保存</el-button>
      <el-button class="init">复位</el-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      // labelPosition: 'right',
      form: {
        checked: "false",
        able: "false",
        push: [
          {id:0, isLast: false},
          {id:1,isLast:true},
        ],
        value: "8056c2e21c000001",
        profile: '',
      },
        value: '',
        input: '',
				dataNum:0,
    };
  },
  methods: {
    deletd(id){
		        // if(this.arrayData.length<=1){ //如果只有一个输入框则不可以减
		        //   return false
		        // }
		        // this.arrayData.splice(index,1)//删除了数组中对应的数据即将这个位置的输入框删除
      for(let i=0; i < this.form.push.length; i++) {
        if(this.form.push[i].id == id) {
          this.form.push.splice(i, 1);
          break;
        }
      }
    },
    add(){
        // this.arrayData.push(//增加即push进数组一个新值
        //   {
        //     id:this.dataNum++,
        //     data:''
        //   }
        // )
      this.form.push[this.form.push.length-1].isLast = false
      this.form.push.push({id:this.form.push[this.form.push.length-1].id + 1, value:'', isLast: true})
    },
  },
}
</script>

<style scope>
.title_tips,
.tips {
  padding: 0.5rem;
  color: #999;
  font-size: small;
}
/* .el-input__inner{
  width: 280px;
} */

.tips1 {
  padding: 0.5rem;
  color: #999;
  font-size: small;
}
/* .el-card{
  padding-left: 100px;
} */
.tips {
  margin-left: 190px;
}
.el-checkbox {
  padding-left: 20px;
  margin-top: 15px;
  color: #999;
  font-size: small;
}
.button {
  float: right;
  margin-top: 15px;
}
.saveOrUpdate {
  background: #50448f;
  color: #fff;
}
.save {
  background: #8b66f3;
  color: #fff;
}
.init {
  background: #2cca86;
  color: #fff;
}
</style>